<template>
    <div class="page">
        <div id="app">
            <v-pageTitle title="首页"></v-pageTitle>
            <h1>{{title}}</h1>
            <ul class="todos">
                <li>
                    <input v-model="newTodo"
                        @keyup.13="addItem"
                        placeholder="快写下您要我记住的事吧"
                        autofocus="true"/>
                </li>
                <li v-for="(todo,index) in todos"
                    :class="{'checked':todo.done}">
                    <input type="checkbox"
                        @change="saveToStore"
                        v-model="todo.done"
                    /><label>{{ index+1 }}.{{ todo.value }}</label>
                    <time>{{ todo.created | date }}</time>
                    <button @click.prevent="delItem(todo)"></button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import './todos.less'
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')

    export default {
        name: 'app',
        data () {
            return {
                newTodo:'',
                title: '添加待办事项',
                todos: []
            }
        },
        created (){
            if (this.is_initialized) {
                this.todos = JSON.parse(localStorage.getItem('VUE-TODOS'))
            }
        },
        computed: {
            is_initialized (){
                return localStorage.getItem('VUE-TODOS') != null
            }
        },
        filters: {
            date(val){
                return moment(val).calendar()
            }
        },
        methods: {
            addItem() {
                this.todos.push({
                    value: this.newTodo,
                    created: Date.now(),
                    done: false
                });
                this.saveToStore();
                this.newTodo = ''
            },
            delItem (todo) {
                console.log(todo)
                this.todos = this.todos.filter((x) => x !== todo)
                this.saveToStore()
            },
            saveToStore(){
                localStorage.setItem('VUE-TODOS', JSON.stringify(this.todos))
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page{
        background-color: #F5F5F5 !important;
    }

    body {
        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.4em;
        background: #D2D4D7;
        color: #4d4d4d;
        margin: 0 auto;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        font-smoothing: antialiased;
        font-weight: 100;
    }

    h1 {
        width: 100%;
        font-size: 30px;
        font-weight: 100;
        height: 50px;
        text-align: center;
        // color: rgba(175, 47, 47, 0.15);
        -webkit-text-rendering: optimizeLegibility;
        -moz-text-rendering: optimizeLegibility;
        text-rendering: optimizeLegibility;
    }

    button,
    input {
        outline: none;
    }

    .hidden {
        display: none;
    }

    @media (min-width: 768px) {
        body {
            max-width: auto;
        }
    }
</style>
